<template>
	<view style="width: 100%; height: 100vh;">
		<view style="width: 100%; height: 2%;"></view>
		<view style="width: 100%; height: 5%; text-align: center;">
			<span style="font-size: 30px;  font-weight: bold;">动作详细</span>
		</view>
		<view style="width: 100%; height: 2%;"></view>
		<!--  -->
		<view style="width: 100%; height: 5%; padding-left: 7%;">
			<span style="font-size: 20px;  font-weight: bold;">动作名称：{{ option.actionName }}</span>
		</view>
		<view style="width: 90%; height: 100vh; margin: 0 auto; border-radius: 6px; box-shadow: 0px 2px 10px #dfdfdf; border: 0.3px solid ##d4c8c8;">
			<view style="width: 100%; height: 5%;"></view>
			<view v-for="(item, index) in actionData" style="width: 90%; height: 17%; margin: 0 auto; border-radius: 9px; margin-bottom: 10px; background-color: #F7F7F7;">
				<view style="width: 100%; height: 3%;"></view>
				<view style="width: 93%; height: 85%; margin: 0 auto;">
					<view style="width: 45%; height: 20%; float: left; padding-left: 5%; padding-top: 5%;">
						<span style="font-size: 18px; font-weight: bold;">第{{ index + 1 }}组</span>
					</view>
					<view style="width: 45%; height: 20%; float: left; padding-left: 7%; padding-top: 5%;">
						<span style="font-size: 16px;">训练次数：{{ item.actionCount }}</span>
					</view>
					<view style="width: 45%; height: 20%; float: left; padding-left: 7%; padding-top: 5%;">
						<span style="font-size: 16px;">重量：{{ item.equipmentWeight }}kg</span>
					</view>
					<view style="width: 40%; height: 85%; margin-top: -20%; float: right;">
						<image style="width: 100%;height: 100%; border-radius: 5px;" :src="'http://101.43.223.224:8765/image/getImageById?id=' + option.actionExample" mode=""></image>
					</view>
				</view>
			</view>
			<!--  -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				option: {},
				actionData: [],
			}
		},
		onLoad(options) {
			this.option = JSON.parse(options.row);
			console.log(JSON.parse(options.row))
			this.action();
		},
		methods: {
			// 动作详细查询
			action() {
				console.log(this.option.id);
			    // 发起查询请求
			    uni.request({
			        url: 'http://127.0.0.1:17000/course/action',
			        method: "GET",
			        data: {
						actionId: this.option.id
					},
			        success: (res) => {
			            if (res.statusCode === 200) {
			                // 将查询结果中的多个任务数据存储到 actionData 数组
			                this.actionData = res.data.data;
			            } else {
			                // 处理请求失败的情况
			                uni.showToast({
			                    title: "请求失败",
			                    icon: "none"
			                });
			            }
			        },
			        fail: (error) => {
			            // 处理请求失败的情况
			            console.log(error)
			            uni.showToast({
			                title: "请求失败",
			                icon: "none"
			            });
			        }
			    });
			},
		}
	}
</script>

<style>
</style>